<template>
  <div v-if="type == 'modal'">
    <div class="vpt-plan-list"
         :style="planListStyle"
         v-if="
        list &&
        list.length > 0 &&
        list[0].event_severity &&
        list[0].event_name &&
        list[0].message
      ">
      <div class="vpt-plan-list-item"
           :class="
          item.event_severity == '1'
            ? 'vpt-plan-list-item-danger'
            : 'vpt-plan-list-item-warn'
        "
           :style="planItemStyle"
           v-for="(item, index) in list"
           :key="index">
        <div class="list-item-left common-box"
             :style="itemLeftStyle">
          <TextWrapperEffect :text="item.message"
                             :showExpanded="item.message.length > 210" />
          <!-- <div
            class="message"
            :style="messageStyle"
            v-if="item.message.length > 107 && expand === true"
          >
            {{ item.message.slice(0, 107) + "..."
            }}<span class="expand" @click="handleExpand(false)"> 展开 </span>
          </div>
          <div
            class="message"
            style="width: 6rem; white-space: wrap"
            v-else-if="item.message.length > 107 && expand === false"
          >
            {{ item.message }}
            <span class="expand" @click="handleExpand(true)"> 收起 </span>
          </div>
          <div class="message" style="width: 6rem; white-space: wrap" v-else>
            {{ item.message }}
          </div> -->
        </div>
        <div class="list-item-right common-box"
             v-if="numType == '1'">
          <div class="label">当前值</div>
          <div class="value">
            {{ addThousandsSeparator(item.mess_num ?? "-") }}
          </div>
        </div>
        <div class="list-item-right common-box"
             v-else>
          <div class="value-num">
            {{ addThousandsSeparator(item.mess_num ?? "-") }}台
          </div>
          <img class="icon-right"
               src="../../assets/img/theme1/icon-rifht-black.png" />
        </div>
      </div>
    </div>
    <div class="vpt-plan-value"
         v-else
         :style="noDataStyle">无</div>
  </div>
  <div v-else>
    <div class="vpt-plan-list"
         :style="planListStyle"
         v-if="list && list.length > 0">
      <div class="vpt-plan-list-item"
           :class="
          item.event_severity == '1'
            ? 'vpt-plan-list-item-danger'
            : 'vpt-plan-list-item-warn'
        "
           :style="planItemStyle"
           v-for="(item, index) in list"
           :key="index">
        <div class="list-item-left common-box"
             :style="itemLeftStyle">
          <arco-tooltip :content="item.message">
            <div class="message">
              {{ item.message }}
              <span name="tag"
                    class="slot"
                    v-if="item.tagType == '1'">{{ item.tag }}</span>
            </div>

          </arco-tooltip>
        </div>

        <div class="list-item-right common-box"
             v-if="numType == '1'">
          <div class="label">当前值</div>
          <div class="value">
            {{ addThousandsSeparator(item.mess_num ?? "-") }}
          </div>
        </div>
        <div class="list-item-right common-box selected"
             v-else
             @click="clickHeader(item)">
          <div class="value-num">
            {{ addThousandsSeparator(item.mess_num ?? "-") }}台
          </div>
          <img class="icon-right"
               src="../../assets/img/theme1/icon-rifht-black.png" />
        </div>
      </div>
    </div>
    <div class="vpt-plan-value"
         v-else
         :style="noDataStyle">暂无数据</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import TextWrapperEffect from "@/components/TextWrapperEffect.vue";
const props = defineProps({
  // expand: { type: Boolean, default: true },
  type: { type: String, default: "list" },
  numType: { type: String, default: "1" },
  tagType: { type: String, default: "0" },
  list: { type: Array, default: () => [] },
  planListStyle: {
    type: Object,
    default: () => ({
      maxHeight: "1rem",
      marginTop: "0.16rem",
    }),
  },
  planItemStyle: {
    type: Object,
    default: () => ({
      borderRadius: "0.04rem",
      padding: "0.1rem 0.08rem",
      fontSize: "0.14rem",
    }),
  },
  noDataStyle: {
    type: Object,
    default: () => ({
      paddingTop: "0.2rem",
      fontSize: "0.14rem",
    }),
  },
  itemLeftStyle: {
    type: Object,
    default: () => ({
      "--bef-height": "0.14rem",
    }),
  },
  messageStyle: {
    type: Object,
    default: () => ({
      "white-space": "nowrap",
    }),
  },
  text: { type: String, default: "" }, // 显示的文案
  defaultExpanded: { type: Boolean, default: false }, // 默认展开、或者收起
  showExpanded: { type: Boolean, default: true }, // 是否开启展开或者收起功能
});

const emit = defineEmits(["clickHeader"]);
const clickHeader = (val) => {
  emit("clickHeader", val);
};
const isExpanded = ref(props.defaultExpanded);
const expand = ref(true);

const expandText = () => {
  isExpanded.value = !isExpanded.value;
};

defineExpose({ isExpanded, expandText });

const handleExpand = (value) => {
  expand.value = value;
};
</script>

<style lang="less" scoped>
.vpt-plan-list {
  overflow: auto;
  .vpt-plan-list-item {
    display: flex;
    // align-items: center;
    justify-content: space-between;

    .common-box {
      display: flex;
      // align-items: center;
    }
    .selected {
      cursor: default;
    }
    .selected:hover {
      cursor: pointer;
    }
  }

  .vpt-plan-list-item {
    border-radius: 0.04rem;
    padding: 0.1rem 0.16rem;
    font-size: 0.14rem;
    &:not(:last-child) {
      margin-bottom: 0.08rem;
    }

    .list-item-left {
      flex: 1;
      width: 0;
      color: #fff;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      margin-right: 0.2rem;
      &::before {
        content: "";
        display: inline-block;
        width: 0.18rem;
        height: var(--bef-height);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 0.1rem;
      }
      .slot {
        padding: 0.03rem 0.05rem;
        background-color: #f53f3f;
        color: #fff;
        font-size: 0.12rem;
        line-height: 0.18rem;
        overflow: hidden;
      }
      .message {
        width: 4.5rem;
        color: #1d2129;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // @include mul-text-e(3);
        // &::before {
        //   content: " ";
        //   float: right;
        //   width: 10px;
        //   height: 40px;
        //   background: red;
        // }
      }
    }
    .list-item-right {
      color: #86909c;
      .label {
        margin-right: 0.05rem;
      }
      .value-num {
        color: #1d2129;
        font-size: 0.14rem;
      }
      .icon-right {
        width: 0.18rem;
        height: 0.18rem;
      }
    }
  }

  .vpt-plan-list-item-danger {
    // background-image: linear-gradient(
    //   180deg,
    //   rgba(226, 46, 46, 0.159) 1%,
    //   rgba(226, 46, 46, 0) 100%
    // );
    background: #f53f3f0d;
    border: 1px solid rgba(226, 46, 46, 0.7);

    .list-item-left {
      &::before {
        background-image: url("../../assets/img/theme1/danger-icon.png");
      }
    }
    .common-box {
      .value {
        color: var(--color-danger);
      }
    }
  }

  .vpt-plan-list-item-warn {
    background-image: linear-gradient(
      180deg,
      rgba(255, 196, 0, 0.258) 1%,
      rgba(255, 195, 0, 0) 100%
    );
    border: 1px solid rgba(255, 195, 0, 0.7);

    .list-item-left {
      &::before {
        background-image: url("../../assets/img/theme1/warn-icon.png");
      }
    }
    .common-box {
      .value {
        color: var(--color-warn);
      }
    }
  }
}
.vpt-plan-value {
  padding-top: 0.2rem;
  font-size: 1.16rem;
  text-align: left;
  color: #ffffffb3;
}
.expand {
  font-size: 0.14rem;
  margin-left: 0.05rem;
  color: #165dff;
}

.content {
  display: flex;
}

// .content .text {
//   word-break: break-all;
// }
// .content .text::before {
//   content: "";
//   float: right;
//   height: 100%;
//   margin-bottom: -1.5em;
// }

// .content .text:not(.isExpanded) {
//   display: -webkit-box;
//   overflow: hidden;
//   -webkit-line-clamp: var(--custom-line-clamp, 2);
//   -webkit-box-orient: vertical;
// }

// .content .text:not(.isExpanded) .btn {
//   float: right;
//   clear: both;
//   margin-right: 8px;
//   cursor: pointer;
// }

// .content .text .btn {
//   color: dodgerblue;
// }
</style>
